<template>
  <div class="MyPage">
    <TopHeader></TopHeader>
    <div id="root" class="root-container">
      <div id="main" class="h100">
        <div class="myctrip_wrap">
          <div id="leftNavWrapper" menutype="0" menuid="index">
            <div id="sideNav" class="aside clearfix">
              <dl class="sidenav" :class="{sidenav_c:navCheck==1}">
                <dt @click="changecheck(1)">
                  <router-link id="index" to="/mypage/myhome" :class="{selected:navCheck==1}"><span>我的旅行首页</span></router-link>
                </dt>
              </dl>
              <dl class="sidenav" :class="{sidenav_c:navCheck==2}">
                <dt @click="changecheck(2)">
                  <router-link id="my_orders" to="/mypage/myorder" :class="{selected:navCheck==2}"><span>订单</span></router-link>
                </dt>
              </dl>
              <dl class="sidenav" :class="{sidenav_c:navCheck==3}">
                <dt @click="changecheck(3)"><a id="info_messageremind" href="javascript:;" :class="{selected:navCheck==3}"><span>我的消息</span></a></dt>
              </dl>
              <dl class="sidenav" :class="{sidenav_c:navCheck==4}">
                <dt class="toggleSide" @click="changecheck(4)"><a href="javascript:;" :class="{selected:navCheck==4}"><span>钱包</span><i class="ico_arr"></i></a></dt>
                <dd><a href="javascript:;" class="" id="pay_mywallet"><span> 我的钱包 </span></a><a href="javascript:;" class=" " id="pay_tpassword"><span> 钱包安全设置 </span></a></dd>
              </dl>
              <dl class="sidenav" :class="{sidenav_c:navCheck==5}">
                <dt @click="changecheck(5)"><a id="ticket_mypromocode" href="javascript:;" :class="{selected:navCheck==5}"><span>优惠券</span></a></dt>
              </dl>
              <dl class="sidenav" :class="{sidenav_c:navCheck==6}">
                <dt @click="changecheck(6)"><a id="ticket_myjifen" href="javascript:;" :class="{selected:navCheck==6}"><span>积分</span></a></dt>
              </dl>
              <dl class="sidenav" :class="{sidenav_c:navCheck==7}">
                <dt @click="changecheck(7)"><a id="info_hotelfavorites" href="javascript:;" :class="{selected:navCheck==7}"><span>我的收藏</span></a></dt>
              </dl>
              <dl class="sidenav" :class="{sidenav_c:navCheck==8}">
                <dt @click="changecheck(8)"><a id="evat_invoice" href="javascript:;" :class="{selected:navCheck==8}"><span>我的发票</span></a></dt>
              </dl>
              <dl class="sidenav" :class="{sidenav_c:navCheck==9}">
                <dt class="toggleSide" @click="changecheck(9)"><a href="javascript:;" :class="{selected:navCheck==9}"><span>常用信息</span><i class="ico_arr"></i></a></dt>
                <dd><a href="javascript:;" class="" id="common_passenger"><span> 常用旅客信息 </span></a><a href="javascript:;" class=" " id="common_contacts"><span> 常用联系人 </span></a><a href="javascript:;" class="" id="common_commonlyinvoice"><span> 常用报销凭证 </span></a><a href="javascript:;" class="" id="common_usefuladdress"><span> 常用地址 </span></a></dd>
              </dl>
              <dl class="sidenav" :class="{sidenav_c:navCheck==10}">
                <dt class="toggleSide" @click="changecheck(10)"><a href="javascript:;" :class="{selected:navCheck==10}"><span>个人中心</span><i class="ico_arr"></i></a></dt>
                <dd><a href="javascript:;" class="" id="info_myaccount"><span> 我的信息 </span></a><a href="javascript:;" class=" " id="info_bindrelation"><span> 绑定和关联 </span></a><a href="javascript:;" class="" id="info_accountsecurity"><span> 账户安全 </span></a><a href="javascript:;" class="" id="myshequ"><span> 我的社区主页 </span></a></dd>
              </dl>
            </div>
          </div>
          <!-- 子组件 -->
          <router-view></router-view>
        </div>
      </div>
    </div>
    <BottomFooter></BottomFooter>
  </div>
</template>

<script>
import TopHeader from '@/components/TopHeader.vue'
import BottomFooter from '@/components/BottomFooter.vue'

export default {
  name: 'MyPage',
  components: {
    TopHeader,
    BottomFooter
  },
  data() {
    return {
      navCheck: 1
    }
  },
  methods: {
    changecheck(n) {
      this.navCheck = n
    }
  },
  created() {
    let phone = localStorage.getItem('user_phone')
    this.$store.dispatch('getOrderInfo', phone)
    // console.log(this.$route.name)
  },
  mounted() {
    // console.log(this.$route.name)
    if (this.$route.name == 'MyOrder') {
      // console.log(1111);
      this.navCheck = 2
    }
  },
  watch: {
    $route(val, oldval) {
      // console.log(val, oldval)
      // console.log(this);
      if (val.name == 'MyHome') {
        this.navCheck = 1
      } else {
        this.navCheck = 2
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#main {
  z-index: 21;
  .myctrip_wrap {
    min-width: 1000px;
    max-width: 1180px;
    margin: -10px auto 0;
  }
  .aside {
    float: left;
    width: 148px;
    margin-right: 20px;
    border-top: 1px solid #bed3ee;
    border-right: 1px solid #bed3ee;
    border-bottom: 1px solid #bed3ee;
    border-left: 1px solid #bed3ee;
    background-color: #f7fbff;
    margin-top: 10px;
  }
  .sidenav {
    background-color: transparent;
    border-bottom: none;
    font-family: simsun;
    color: #333;
    .ico_arr {
      position: absolute;
      border: 5px solid transparent;
      border-top-color: #2577e3;
      border-bottom: 0 none;
      font-size: 0;
      line-height: 0;
      overflow: hidden;
    }
    .selected {
      width: 144px;
      background-color: #2477e3;
      color: #2477e3;
      *zoom: 1;
      span {
        background-color: #fff;
      }
    }
    & span:hover {
      background-color: #fff;
      color: #2477e3;
    }
    a {
      position: relative;
      z-index: 1;
      display: block;
      line-height: 1;
      color: #333;
      span {
        display: block;
        padding: 13px 10px 13px 12px;
      }
    }
    dt {
      a {
        padding-left: 4px;
        font-size: 14px;
      }
      .ico_arr {
        top: 19px;
        right: 10px;
      }
    }
    dd {
      display: none;
      position: relative;
      a {
        padding-left: 4px;
        border-top: none;
        border-bottom: none;
        span {
          display: block;
          font-size: 14px;
          padding: 13px 10px 13px 32px;
        }
      }
    }
  }
  .sidenav_c dd {
    display: block;
  }
}
</style>
